<#assign base=springMacroRequestContext.contextPath>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <script type="text/javascript" src="${base}/static/js/jquery-1.9.1.min.js"></script>
</head>
<style>
    body{
        font-size: 14px;
    }
    input{
        width: 160px;!important;
    }
</style>
<body id="page" style="margin-top: 100px;">
<div style='float:left; width:500px; height:200px;margin-left: 50px;'>
    <br>
    <div id="a">
        <el-input v-model="input" icon="edit" placeholder="请输入内容"></el-input>
        <br>
        <br>
        <el-radio class="radio" v-model="radio" label="1">男</el-radio>
        <el-radio class="radio" v-model="radio" label="2">女</el-radio>
        <br>
        <br>
        <el-radio-group v-model="radio_g">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
        </el-radio-group>
    </div>
    <br>
    <div id="b">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :key="city" :label="city">{{city}}</el-checkbox>
        </el-checkbox-group>
    </div>
    <br>
    <div id="c">
        <el-input-number v-model="num1" @change="handleChange" :min="1" :max="10"></el-input-number>
    </div>
    <br>
    <div id="d">
        <el-select v-model="value5" multiple filterable placeholder="请选择" @change="handleChange">
            <el-option
                    v-for="item in options"
                    :label="item.label"
                    :value="item.value"
                    :key="item.value">
            </el-option>
        </el-select>
    </div>
    <br>
    <div id="e">
        <el-cascader
                :options="options"
                change-on-select
                filterable
                clearable
                @change="handleChange"
        ></el-cascader>
    </div>
    <br>
    <div id="f">
        <el-switch
                v-model="value1"
                on-text=""
                off-text=""
                @change="handleChange">
        </el-switch>
        <el-switch
                v-model="value2"
                on-color="#13ce66"
                off-color="#ff4949">
        </el-switch>
    </div>
    <br>
    <br>
    <div id="g" class="block">
        <el-rate
                v-model="value2"
                :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
        </el-rate>
    </div>
    <br>
    <div id="k">
        <el-upload
                class="upload-demo"
                ref="upload"
                action="${base}/uploadFile"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" :on-click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <#--<el-upload
                class="upload-demo"
                action="${base}/uploadFile"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>-->
    </div>
</div>
<div style='float:left; width:440px; height:200px;margin-left: 100px;'>
    <div id="h">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name" style="width: 217px;"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="北京" value="beijing"></el-option>
                    <el-option label="上海" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
                <el-date-picker
                        type="datetime"
                        v-model="ruleForm.date"
                        style="width: 217px;"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <div>
                        <el-checkbox label="美食/餐厅线上活动" name="type" style="width: 150px;"></el-checkbox>
                        <el-checkbox label="地推活动" name="type" style="width: 150px;"></el-checkbox>
                    </div>
                    <div>
                        <el-checkbox label="线下主题活动" name="type" style="width: 150px;"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type" style="width: 150px;"></el-checkbox>
                    </div>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc" autosize></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
<div style='float:left; width:600px; height:200px;margin-left: 100px;'>
    <div id="i">
        <el-table
                :data="tableData3"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    v-if="false">
            </el-table-column>
            <el-table-column
                    label="发送日期"
                    width="170">
                <template scope="scope">{{ scope.row.addtime }}</template>
            </el-table-column>
            <el-table-column
                    prop="receiveEmail"
                    label="接收人"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="验证码"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="${pageInfo.pageSize}"
                layout="prev, pager, next"
                :page-count="pageTotal"
                style="margin-left: 316px;">
        </el-pagination>
    </div>
    <br>
    <div id="j">
        <el-form :model="tableForm" :rules="tableRules" ref="tableForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="接收人" prop="receiveEmail">
                <el-input v-model="tableForm.receiveEmail" style="width: 217px;"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="tableForm.code" style="width: 217px;"></el-input>
            </el-form-item>
            <el-form-item label="时间" required>
                <el-date-picker
                        v-model="tableForm.addtime"
                        type="datetime"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('tableForm')">立即创建</el-button>
                <el-button @click="resetForm('tableForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //k
    new Vue({
        el : '#k',
        fileList : [],
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            submitUpload(e) {
                console.log(e);
            }
        }
    });


    //j
    const j = {
        tableForm: {
            receiveEmail: '',
            code: '',
            addtime: ''
        },
        tableRules: {
            receiveEmail: [
                { required: true, message: '请输入接收人', trigger: 'blur' },
                { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
            ],
            code: [
                { required: true, message: '输入验证码', trigger: 'blur' },
                { min: 6, max: 6, message: '长度在是 6 个字符', trigger: 'blur' }
            ],
            addtime: [
                { type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }
            ]
        }
    };
    new Vue({
        el : '#j',
        data : j,
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const formatDate = function (date) {
                            let y = date.getFullYear();
                            let m = date.getMonth() + 1;
                            m = m < 10 ? ('0' + m) : m;
                            let d = date.getDate();
                            d = d < 10 ? ('0' + d) : d;
                            let h = date.getHours();
                            let minute = date.getMinutes();
                            minute = minute < 10 ? ('0' + minute) : minute;
                            let second = date.getSeconds();
                            second = second < 10 ? ('0' + second) : second;
                            return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                        };
                        this.tableForm.addtime = formatDate(this.tableForm.addtime);
                        $.ajax({
                            url : '${base}/insertEmailCode',
                            data : {
                                receiveEmail : this.tableForm.receiveEmail,
                                code : this.tableForm.code,
                                addtime : this.tableForm.addtime,
                                pageNo : 1
                            },
                            type : 'post',
                            success : function (data) {
                                i.tableData3 = data.list;
                                i.currentPage = 1;
                                j.tableForm.receiveEmail = '';
                                j.tableForm.code = '';
                                j.tableForm.addtime = '';
                                i.pageTotal = data.totalPage;
                            },
                            error : function () {
                                alert("请求发生错误!");
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
    //i
    const i = {
        tableData3 : ${list},
        multipleSelection : [],
        currentPage : ${pageInfo.pageNo},
        pageTotal : ${pageInfo.total}
    };
    new Vue({
        el : '#i',
        data : i,
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                $.ajax({
                    url : '${base}/tablePage',
                    data : {
                        pageNo : val
                    },
                    type : 'post',
                    success : function (data) {
                        i.tableData3 = data.list;
                    },
                    error : function () {
                        alert("请求发生错误!");
                    }
                })
            },
            handleDelete(index,row){
                console.log(row.id);
                console.log(index);
            }
        }
    });
    //h
    const h = {
        ruleForm: {
            name: '${name}',
            region: '${region}',
            date: '',
            delivery: ${delivery},
            type: ${type},
            resource: '${resource}',
            desc: '${desc}'
        },
        rules: {
            name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            region: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date: [
                { type: 'datetime', required: true, message: '请选择日期', trigger: 'change' }
            ],
            type: [
                { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
            ],
            resource: [
                { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
            desc: [
                { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]
        }
    };
    new Vue({
        el : '#h',
        data : h,
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const d=new Date(this.ruleForm.date);
                        const parameter = JSON.stringify(this.ruleForm);
                        $.post('${base}/submitForm',{parameter : parameter, datetime : d.valueOf()},function () {
                            //window.location.reload(true);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });

    //g
    new Vue({
        el : '#g',
        data() {
            return {
                value2: null
            }
        }
    });
    //f
    const f = {
        value1: true,
        value2: true
    };
    new Vue({
        el : '#f',
        data : f,
        methods : {
            handleChange : function (value) {
                console.log(value)
            }
        }
    });
    //e
    const e = {
        options: [{
            value: 'zhinan',
            label: '指南',
            children: [{
                value: 'shejiyuanze',
                label: '设计原则',
                children: [{
                    value: 'yizhi',
                    label: '一致'
                }, {
                    value: 'fankui',
                    label: '反馈'
                }, {
                    value: 'xiaolv',
                    label: '效率'
                }, {
                    value: 'kekong',
                    label: '可控'
                }]
            }, {
                value: 'daohang',
                label: '导航',
                children: [{
                    value: 'cexiangdaohang',
                    label: '侧向导航'
                }, {
                    value: 'dingbudaohang',
                    label: '顶部导航'
                }]
            }]
        }, {
            value: 'zujian',
            label: '组件',
            children: [{
                value: 'basic',
                label: 'Basic',
                children: [{
                    value: 'layout',
                    label: 'Layout 布局'
                }, {
                    value: 'color',
                    label: 'Color 色彩'
                }, {
                    value: 'typography',
                    label: 'Typography 字体'
                }, {
                    value: 'icon',
                    label: 'Icon 图标'
                }, {
                    value: 'button',
                    label: 'Button 按钮'
                }]
            }, {
                value: 'form',
                label: 'Form',
                children: [{
                    value: 'radio',
                    label: 'Radio 单选框'
                }, {
                    value: 'checkbox',
                    label: 'Checkbox 多选框'
                }, {
                    value: 'input',
                    label: 'Input 输入框'
                }, {
                    value: 'input-number',
                    label: 'InputNumber 计数器'
                }, {
                    value: 'select',
                    label: 'Select 选择器'
                }, {
                    value: 'cascader',
                    label: 'Cascader 级联选择器'
                }, {
                    value: 'switch',
                    label: 'Switch 开关'
                }, {
                    value: 'slider',
                    label: 'Slider 滑块'
                }, {
                    value: 'time-picker',
                    label: 'TimePicker 时间选择器'
                }, {
                    value: 'date-picker',
                    label: 'DatePicker 日期选择器'
                }, {
                    value: 'datetime-picker',
                    label: 'DateTimePicker 日期时间选择器'
                }, {
                    value: 'upload',
                    label: 'Upload 上传'
                }, {
                    value: 'rate',
                    label: 'Rate 评分'
                }, {
                    value: 'form',
                    label: 'Form 表单'
                }]
            }, {
                value: 'data',
                label: 'Data',
                children: [{
                    value: 'table',
                    label: 'Table 表格'
                }, {
                    value: 'tag',
                    label: 'Tag 标签'
                }, {
                    value: 'progress',
                    label: 'Progress 进度条'
                }, {
                    value: 'tree',
                    label: 'Tree 树形控件'
                }, {
                    value: 'pagination',
                    label: 'Pagination 分页'
                }, {
                    value: 'badge',
                    label: 'Badge 标记'
                }]
            }, {
                value: 'notice',
                label: 'Notice',
                children: [{
                    value: 'alert',
                    label: 'Alert 警告'
                }, {
                    value: 'loading',
                    label: 'Loading 加载'
                }, {
                    value: 'message',
                    label: 'Message 消息提示'
                }, {
                    value: 'message-box',
                    label: 'MessageBox 弹框'
                }, {
                    value: 'notification',
                    label: 'Notification 通知'
                }]
            }, {
                value: 'navigation',
                label: 'Navigation',
                children: [{
                    value: 'menu',
                    label: 'NavMenu 导航菜单'
                }, {
                    value: 'tabs',
                    label: 'Tabs 标签页'
                }, {
                    value: 'breadcrumb',
                    label: 'Breadcrumb 面包屑'
                }, {
                    value: 'dropdown',
                    label: 'Dropdown 下拉菜单'
                }, {
                    value: 'steps',
                    label: 'Steps 步骤条'
                }]
            }, {
                value: 'others',
                label: 'Others',
                children: [{
                    value: 'dialog',
                    label: 'Dialog 对话框'
                }, {
                    value: 'tooltip',
                    label: 'Tooltip 文字提示'
                }, {
                    value: 'popover',
                    label: 'Popover 弹出框'
                }, {
                    value: 'card',
                    label: 'Card 卡片'
                }, {
                    value: 'carousel',
                    label: 'Carousel 走马灯'
                }, {
                    value: 'collapse',
                    label: 'Collapse 折叠面板'
                }]
            }]
        }, {
            value: 'ziyuan',
            label: '资源',
            children: [{
                value: 'axure',
                label: 'Axure Components'
            }, {
                value: 'sketch',
                label: 'Sketch Templates'
            }, {
                value: 'jiaohu',
                label: '组件交互文档'
            }]
        }],
        selectedOptions3: ['zujian', 'data', 'tag']
    };
    new Vue({
        el : '#e',
        data : e,
        methods : {
            handleChange : function (value) {
                console.log(value);
            }
        }
    });
    //d
    const d = {
        options: [{
            value: '1',
            label: '黄焖鸡'
        }, {
            value: '2',
            label: '叫化鸡'
        }, {
            value: '3',
            label: '沟帮子熏鸡'
        }, {
            value: '4',
            label: '小鸡炖蘑菇'
        }, {
            value: '5',
            label: '辣子鸡'
        }],
        value5: []
    };
    new Vue({
        el : '#d',
        data : d,
        methods : {
            handleChange : function (value) {
                console.log(value);
            }
        }
    });
    //c
    const c = {
        num1: 1
    };
    new Vue({
        el : '#c',
        data : c,
        methods: {
            handleChange(value) {

            }
        }
    });
    //b
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    const condition = {
        checkAll: true,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
    };
    new Vue({
        el : '#b',
        data : condition,
        methods: {
            handleCheckAllChange(event) {
                this.checkedCities = event.target.checked ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }
    });
    //a
    const a = {
        input : '',
        radio : '1',
        radio_g : '上海'
    };
    new Vue({
        el : '#a',
        data : a
    });
</script>
</body>
</html>